<template>
  <div id="app">
    <a-layout style="height: 100%;">
      <a-layout-sider
        theme="light"
        breakpoint="md"
        collapsedWidth="0"
        v-model="collapsed"
        collapsible
        :trigger="null"
      >

        <div class="logo">
          <img src="../../assets/logo.svg"/>
          <span class="admin-title" v-if="!collapsed">Maki Admin</span>
        </div>
        <a-menu theme="light"
                :defaultSelectedKeys="['1']"
                @click="handleRoute">
          <a-menu-item key="/home">
            <a-icon type="home"/>
            <span>Index</span>
          </a-menu-item>
          <a-menu-item key="/article">
            <a-icon type="video-camera"/>
            <span>Article</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout>
        <a-layout-header :style="{ background: 'rgb(253,253,253)', padding: 0 }">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="()=> collapsed = !collapsed"
          />
        </a-layout-header>

        <a-layout-content :style="{ margin: '24px 16px 0' }">
          <router-view/>
        </a-layout-content>
        <a-layout-footer style="textAlign: center">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>


<script>
  import {mapActions} from 'vuex'

  export default {
    name: 'app',
    data () {
      return {
        collapsed: false,
      }
    },
    mounted () {
      this.getProfile()
    },
    methods: {
      ...mapActions(['getProfile']),
      handleRoute ({key}) {
        if (key && key !== this.activeMenu) {
          this.$router.push(key)
        }
      }
    },
    computed: {
      // 跟随路由变化
      activeMenu () {
        return '/' + this.$route.path.split('/')[1]
      },
    }
  }
</script>

<style lang="less">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    box-sizing: border-box;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .max-width-900 {
    max-width: 900px;
  }

  .ant-layout-sider-zero-width-trigger {
    z-index: 10000;
  }

  .logo {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 35px;
      margin-right: 8px;
    }
    .admin-title {
      font-weight: bold;
    }
  }

  .trigger {
    margin-left: 10px;
  }
</style>
